<template>
    <!-- 开屏广告 -->
    <div class="spread-img-container" v-show="isSpreadShow">
        <span class="jump">
            <span @click="isSpreadShow = false">点击跳转</span>
            <b>{{downTime}}</b>
        </span>
    </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';

 const isSpreadShow = ref(true);
 const downTime = ref(5);
 let spreadTimer = null;
 
 //倒计时
 const countDownTime = () => {
    spreadTimer = setInterval(()=>{
        downTime.value--
        if (downTime.value == 0) {
            isSpreadShow.value = false;
        }
    },1000)
 }

 onMounted(() => {
    countDownTime(); //界面初始化倒计时
 })

</script>

<style scoped>

    .spread-img-container {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(@/assets/images/occhistory1.png) no-repeat center;
        z-index: 999;
        background-size: cover;

        .jump {
            position: absolute;
            top: 20px;
            right: 25px;
            font-size: 28px;
            /* color: #3eafe0; */

            b {
                margin-left: 10px;
            }
        
        }
    }

</style>
